---
title: What is your nationality?
scenario: |
  As part of an online service, you are asked to provide your nationality.

  Things to try:

  1. Select 'British' or 'Irish'
  2. Select 'Citizen of a different country' and provide a country name
  3. Select 'Citizen of a different country' and submit the form without
      providing a country name
  4. Do not select any of the options, and use ‘Help with nationality’ to
      provide a reason why you cannot provide your nationality.
  5. Intentionally submit the form without selecting any of the options
---

{# This example is based of the  "What is your nationality?" example: https://www.registertovote.service.gov.uk/register-to-vote/nationality #}
{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ "Error: " if errorSummary | length }}{{ pageTitle }} - GOV.UK{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">

      <form method="post" novalidate>
        {% if errorSummary | length %}
          {{ govukErrorSummary({
            titleText: "There is a problem",
            errorList: errorSummary
          }) }}
        {% endif %}

        {% set otherCountryHtml %}

          {{ govukInput({
            id: "country-name",
            name: "country-name",
            type: "text",
            classes: "govuk-input--width-20",
            label: {
              text: "Country name"
            },
            value: values["country-name"],
            errorMessage: errors["country-name"]
          }) }}

        {% endset %}

        {{ govukCheckboxes({
          idPrefix: "confirm-nationality",
          name: "confirm-nationality",
          fieldset: {
            legend: {
              text: "What is your nationality?",
              isPageHeading: true,
              classes: "govuk-fieldset__legend--xl"
            }
          },
          hint: {
            text: "Select all options that are relevant to you."
          },
          items: [
            {
              value: "british-nationality",
              text: "British",
              hint: {
                text: "including English, Scottish, Welsh and Northern Irish"
              }
            },
            {
              value: "irish-nationality",
              text: "Irish",
              hint: {
                text: "including from Northern Ireland"
              }
            },
            {
              name: "other-nationality",
              value: "yes",
              text: "Citizen of a different country",
              conditional: {
                html: otherCountryHtml
              },
              checked: values["other-nationality"] === "yes"
            }
          ],
          values: values["confirm-nationality"],
          errorMessage: errors["confirm-nationality"]
        }) }}

        {% set helpWithNationalityHtml %}

          <p class="govuk-body">
            We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
          </p>

          {{ govukTextarea({
            name: "details-cannot-provide-nationality",
            id: "details-cannot-provide-nationality",
            classes: "govuk-!-margin-bottom-0",
            label: {
              text: "Can you provide more detail on why you cannot confirm your nationality?"
            },
            value: values["details-cannot-provide-nationality"],
            errorMessage: errors["details-cannot-provide-nationality"]
          }) }}

        {% endset %}

        {{ govukDetails({
          summaryText: "Help with nationality",
          html: helpWithNationalityHtml,
          open: values["details-cannot-provide-nationality"] | length
        }) }}

        {{ govukButton({
          text: "Continue"
        }) }}
      </form>
    </div>
  </div>
{% endblock %}
